<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<script src="../../../js/lib/jquery-v3.0.0/jquery.js" type="text/javascript" charset="utf-8"></script>
		<title>jquery.deferred 演示</title>
	</head>

	<body>
		<h1>jquery.deferred 演示</h1>
		<a href="http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object">文章链接</a>
		<div class="content" id="content">

		</div>
		<script type="text/javascript">
			var $content = $("#content");
			var i = 1;
			const addLog = (msg, color) => {
				if(!color) color = 'black';
				$content.append('<p style="color:' + color + ';">' + i + ' : ' + msg + '</p>');
				i += 1;
			}
			var urlRight = "../data/data1.html";
			var urlError = "../data/d/data1.html";

			const exam1 = () => {
				$.ajax({　　　　
					url: urlRight,
					success: function() {　　
						addLog("exam1:哈哈，成功了！");
					},
					error: function() {　　　　　　
						addLog("exam1:出错啦！");　　　　
					}　　
				});
			}
			const exam2 = () => {
				$.ajax({　　　　
					url: urlError,
					success: function() {　　　　　　
						addLog("exam2:哈哈，成功了！");　　　　
					},
					error: function() {　　　　　　
						addLog("exam2:出错啦！");　　　　
					}　　
				});
			}

			const exam3 = () => {
				$.ajax(urlRight)
					.done(function() {
						addLog("exam3:哈哈，成功了！");
					}).fail(function() {
						addLog("exam3:出错啦！");
					});
			}

			const exam4 = () => {
				$.ajax(urlError)
					.done(function() {
						addLog("exam4:哈哈，成功了！");
					}).fail(function() {
						addLog("exam4:出错啦！");
					});
			}

			const exam5 = () => {
				$.ajax(urlRight)　　.done(function() {
					addLog("exam5:哈哈，成功了！");
				})　　.fail(function() {
					addLog("exam5:出错啦！");
				})　　.done(function() {
					addLog("exam5:第二个回调函数！");
				});
			}
			const exam6 = () => {
				$.when($.ajax(urlRight), $.ajax(urlRight))　　
					.done(function() {
						addLog("exam6:哈哈，成功了！");
					})　　
					.fail(function() {
						addLog("exam6:出错啦！");
					});
			}
			const exam7 = () => {
				$.when($.ajax(urlRight), $.ajax(urlError))　　
					.done(function() {
						addLog("exam7:哈哈，成功了！");
					})　　
					.fail(function() {
						addLog("exam7:出错啦！");
					});
			}
			const exam8 = () => {
				//done 无效果
				var wait = function() {　　　　
					var tasks = function() {　　　　　　
						addLog("exam8:执行完毕！3s后执行的我");　　　　
					};　　　　
					setTimeout(tasks, 3000);　　
				};
				$.when(wait())　　
					.done(function() {
						addLog("exam8:哈哈，成功了！");
					})　　
					.fail(function() {
						addLog("exam8:出错啦！");
					});
			}
			const exam9 = () => {
				var dtd = $.Deferred(); // 新建一个deferred对象
				var wait = function(dtd) {　　　　
					var tasks = function() {　　　　　　
						addLog("exam9:执行完毕！");　　　　　　
						dtd.resolve(); // 改变deferred对象的执行状态
					};
					addLog("exam9:3s后执行完毕");　
					setTimeout(tasks, 3000);　　　　
					return dtd;
				};

				$.when(wait(dtd))　　
					.done(function() {
						addLog("exam9:哈哈，成功了！");
					})　　
					.fail(function() {
						addLog("exam9:出错啦！");
					});
			}
			const exam10 = () => {
				var dtd = $.Deferred(); // 新建一个deferred对象
				var wait = function(dtd) {　　　　
					var tasks = function() {　　　　　　
						addLog("exam10:执行完毕！");　　　　　　
						dtd.reject(); // 改变deferred对象的执行状态
					};
					addLog("exam10:3s后执行完毕");　
					setTimeout(tasks, 3000);　　　　
					return dtd;
				};

				$.when(wait(dtd))　　
					.done(function() {
						addLog("exam10:哈哈，成功了！");
					})　　
					.fail(function() {
						addLog("exam10:出错啦！");
					});
			}

			const exam11 = () => {
				var dtd = $.Deferred(); // 新建一个deferred对象
				var wait = function(dtd) {　　　　
					var tasks = function() {　　　　　　
						addLog("exam11:执行完毕！");　　　　　　
						dtd.resolve(); // 改变deferred对象的执行状态
					};
					addLog("exam11:3s后执行完毕");　
					setTimeout(tasks, 3000);　　　　
					return dtd;
				};

				$.when(wait(dtd))　　
					.done(function() {
						addLog("exam11:哈哈，成功了！");
					})　　
					.fail(function() {
						addLog("exam11:出错啦！");
					});
				dtd.resolve(); //提前更改dtd状态
			}
			const exam12 = () => {
				var prefix = "exam12:";
				var dtd = $.Deferred(); // 新建一个deferred对象
				var wait = function(dtd) {　　　　
					var tasks = function() {　　　　　　
						addLog(prefix + "执行完毕！");　　　　　　
						dtd.resolve(); // 改变deferred对象的执行状态
					};
					addLog(prefix + "3s后执行完毕");　
					setTimeout(tasks, 3000);　　　　
					return dtd.promise(); // 返回promise对象
				};
				var d = wait(dtd);
				$.when(d)　　
					.done(function() {
						addLog(prefix + "哈哈，成功了！");
					})　　
					.fail(function() {
						addLog(prefix + "出错啦！");
					});
				//				dtd.resolve(); //提前更改dtd状态,仍然有效
//				d.resolve(); // 此时，这个语句是无效的
			}

			const exam13 = () => {
				var prefix = "exam13:";
				var wait = function() {　　
					var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
					var tasks = function() {　　　　　　
						addLog(prefix + "执行完毕！");　　　　　　
						dtd.resolve(); // 改变deferred对象的执行状态
					};
					addLog(prefix + "3s后执行完毕");　
					setTimeout(tasks, 3000);　　　　
					return dtd.promise(); // 返回promise对象
				};
				//$.when(wait())　　
				wait()
					.done(function() {
						addLog(prefix + "哈哈，成功了！");
					})　　
					.fail(function() {
						addLog(prefix + "出错啦！");
					});
			}
			const exam14 = () => {
				var prefix = "exam14:";
				var wait = function(dtd) {　　
					var tasks = function() {　　　　　　
						addLog(prefix + "执行完毕！");　　　　　　
						dtd.resolve(); // 改变deferred对象的执行状态
					};
					addLog(prefix + "3s后执行完毕");　
					setTimeout(tasks, 3000);　　　　
					return dtd.promise(); // 返回promise对象
				};
				$.Deferred(wait)　　
					.done(function() {
						addLog(prefix + "哈哈，成功了！");
					})　　
					.fail(function() {
						addLog(prefix + "出错啦！");
					});
			}
			const exam15 = () => {
				var prefix = "exam15:";
				var dtd = $.Deferred(); // 生成Deferred对象
				var wait = function(dtd) {　　
					var tasks = function() {　　　　　　
						addLog(prefix + "执行完毕！");　　　　　　
						dtd.resolve(); // 改变deferred对象的执行状态
					};
					addLog(prefix + "3s后执行完毕");　
					setTimeout(tasks, 3000);　　　　
				};
				dtd.promise(wait); //???没效果
				wait.done(function() {
						addLog(prefix + "哈哈，成功了！");
					})　　
					.fail(function() {
						addLog(prefix + "出错啦！");
					});
			}
			exam1();
			exam2();
			exam3();
			exam4();
			exam5();
			exam6();
			exam7();
			exam8();
			exam9();
			exam10();
			exam11();
			exam12();
			exam13();
			exam14();
			exam15();
		</script>
	</body>

</html>